<template>
	<view class="nav-bar">
		<view :style="{height:statusBarHeight+'px'}"></view>
		<uni-nav-bar left-icon="left" background-color="#3274F9" color="#fff" @clickLeft="back" title="经营数据" :border="false" fixed="true"></uni-nav-bar>
	</view>
	
	<view class="tab-list" :style="{marginTop:statusBarHeight+44+'px'}">
		<view class="tabs">
			<view class="tab" :class="tab == 1 ? 'active' : '' " @click="tabChange(1)">今日统计</view>
			<view class="tab" :class="tab == 2 ? 'active' : '' " @click="tabChange(2)">本周统计</view>
			<view class="tab" :class="tab == 3 ? 'active' : '' " @click="tabChange(3)">本月统计</view>
		</view>
	</view>
	
	<view class="content-bg">
		<view class="flex-row justify-between" style="padding: 10rpx;">
			<text>今日收入情况</text>
			<text style="color: #666666;">2025-11-13</text>
		</view>
		
		<view class="charts-box">
		    <qiun-data-charts 
		      type="ring"
		      :opts="opts1"
		      :chartData="chartData1"
		    />
		</view>
		
		<view class="line"></view>
		
		<view class="flex-row justify-between" style="padding: 10rpx;margin-top: 30rpx;">
			<text>今日订单数</text>
			<text style="color: #666666;">共108单</text>
		</view>
		<view class="flex-row justify-around" style="margin-top: 20rpx;">
			<view class="bg-left">
				<text>线下支付</text>
				<text style="margin-top: 30rpx;">20</text>
			</view>
			<view class="bg-right">
				<text>线上支付</text>
				<text style="margin-top: 30rpx;">20</text>
			</view>
		</view>
		
		<view class="line" style="margin-top: 50rpx;"></view>
		
		<text style="padding: 10rpx;margin-top: 30rpx;">近7日数据变化</text>
		
		
		 <view class="charts-box2">
		    <qiun-data-charts 
		      type="column"
		      :opts="opts2"
		      :chartData="chartData2"
		    />
		</view>
	</view>
	<view style="height: 1rpx;"></view>
</template>

<script>
	import { useUserStore } from '../../store/userStore';
	export default {
		data() {
			return {
				tab:1,
				chartData1: {},
				chartData2: {},
				opts1: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: [5,5,5,5],
					dataLabel: true,
					enableScroll: false,
					legend: {
					  show: true,
					  position: "bottom",
					  lineHeight: 30
					},
					title: {
					  name: "共计(元)",
					  fontSize: 14,
					  color: "#666666"
					},
					subtitle: {
					  name: "200",
					  fontSize: 15,
					  color: "#7cb5ec"
					},
			    },
				opts2: {
					color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: [15,15,0,5],
					enableScroll: false,
					legend: {},
					xAxis: {
					  disableGrid: true
					},
					yAxis: {
					  data: [
						{
						  min: 0
						}
					  ]
					},
					extra: {
					  column: {
						type: "stack",
						width: 30,
						activeBgColor: "#000000",
						activeBgOpacity: 0.08,
						labelPosition: "center"
					  }
					}
				}
			};
		},
		computed:{
			statusBarHeight(){
				return useUserStore().statusBarHeight
			}
		},
		onReady() {
		    this.getServerData1();
			this.getServerData2();
	    },
		methods:{
			 getServerData1() {
			  //模拟从服务器获取数据时的延时
			  setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					series: [
					  {
						data: [{"name":"线上支付","value":50,"labelText":"线上支付:50"},{"name":"线下支付","value":30,"labelText":"线下支付:30"}]
					  }
					]
				  };
				this.chartData1 = JSON.parse(JSON.stringify(res));
			  }, 500);
			},
			getServerData2() {
			  //模拟从服务器获取数据时的延时
			  setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: ["2018","2019","2020","2021","2022","2023"],
					series: [
					  {
						name: "线上支付",
						textColor: "#FFFFFF",
						data: [35,36,31,33,13,34]
					  },
					  {
						name: "线下支付",
						textColor: "#FFFFFF",
						data: [18,27,21,24,6,28]
					  }
					]
				  };
				this.chartData2 = JSON.parse(JSON.stringify(res));
			  }, 500);
			},
			tabChange(index){
				this.tab = index
			},
			back(){
				uni.navigateBack({
				  delta: 1,
				});
			}
		}
	}
</script>

<style lang="scss">
.tab-list{
	background-color: #3274F9;
	height: 200rpx;
}
.tabs {
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 81rpx;
	padding: 22rpx 25rpx 25rpx;

	.tab {
		color: #F5F6F7;
		font-size: 33rpx;
		position: relative;
	}

	.active {
		color: #FFFFFF;
		font-size: 35rpx;
	}

	.active::after {
		content: ' ';
		width: 35rpx;
		height: 6rpx;
		border-radius: 3rpx;
		background-color: #FFFFFF;
		position: absolute;
		bottom: -12rpx;
		left: calc(50% - 17.5rpx);
		position: absolute;
	}
}
.content-bg{
	background-color: #FFFFFF;
	border-radius: 20rpx;
	padding: 20rpx;
	margin-top: -70rpx;
	// min-height: 500rpx;
	margin-left: 15rpx;
	margin-right: 15rpx;
	margin-bottom: 66rpx;
	display: flex;
	flex-direction: column;
}
.charts-box {
    width: 100%;
    // height: 500rpx;
	padding-top: 30rpx;
}
.charts-box2{
    width: 100%;
    padding-top: 30rpx;
}
.bg-left{
	background-image: url('/static/data_1.png');
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: 30rpx;
	align-items: left;
	color: #fff;
	background-size: 100% 100%;
	width: 45%;
	height: 180rpx;
}
.bg-right{
	background-image: url('/static/data_2.png');
	display: flex;
	flex-direction: column;
	align-items: left;
	justify-content: center;
	padding-left: 30rpx;
	color: #fff;
	width: 45%;
	height: 180rpx;
    background-size: 100% 100%;
}
</style>
